.clock {
	position:relative;
	font-family:Helvetica,monaco,consolas,"courier new",monospace;
	font-size:1.6rem;
	line-height:1.375;
	text-align: center;
}

.clock:before,
.clock:after {
	position:absolute;
	top:0;
	bottom:0;
	content:':';
	z-index:2;
	line-height:1.15;
	color:#333;
}

.clock:before {
	left:1.8em;
}

.clock:after {
	right:1.9em;
}

.clock span {
	position:relative;
	display:inline-block;
	padding:0 .25em;
	margin:0 .06125em;
	z-index:1;

	-webkit-transform:perspective(750);
	-moz-transform:perspective(750);
	-ms-transform:perspective(750);
	transform:perspective(750);

	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

.clock span:first-child {
	margin-left:0;
}

.clock span:last-child {
	margin-right:0;
}

.clock span:nth-child(2),
.clock span:nth-child(4) {
	margin-right:.3em;
}

.clock span:nth-child(3),
.clock span:nth-child(5) {
	margin-left:.3em;
}

.clock span:before,
.clock span:after {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	color:#565656;
	text-shadow:0 1px 0 #28292B;
	background:#F5F5F5;
	border-radius:.125em;
	box-shadow: 0 0 2px #7E7E7E;
	outline:1px solid transparent; /* fix jagged edges in ff */

	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;

	-webkit-transition:-webkit-transform .75s, opacity .75s;
	-moz-transition:-moz-transform .75s, opacity .75s;
	-ms-transition:-ms-transform .75s, opacity .75s;
	transition:transform .75s, opacity .75s;
}

.clock span:before {
	opacity:1;
	z-index:1;
	content:attr(data-old);

	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	transform-origin:0 0;

	-webkit-transform:translate3d(0,0,0) rotateX(0);
	-moz-transform:translate3d(0,0,0) rotateX(0);
	-ms-transform:translate3d(0,0,0) rotateX(0);
	transform:translate3d(0,0,0) rotateX(0);
}

.clock span:after {
	opacity:0;
	z-index:2;
	content:attr(data-now);

	-webkit-transform-origin:0 100%;
	-moz-transform-origin:0 100%;
	-ms-transform-origin:0 100%;
	transform-origin:0 100%;

	-webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);
	-moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);
	-ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);
	transform:translate3d(0,-102.5%,0) rotateX(90deg);
}

.clock .flip:before {
	opacity:0;
	-webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);
	-moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);
	-ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);
	transform:translate3d(0,102.5%,0) rotateX(-90deg);
}

.clock .flip:after {
	opacity:1;
	-webkit-transform:translate3d(0,0,0) rotateX(0);
	-moz-transform:translate3d(0,0,0) rotateX(0);
	-ms-transform:translate3d(0,0,0) rotateX(0);
	transform:translate3d(0,0,0) rotateX(0);
}
